<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import {ElForm,ElFormItem,ElInput,ElMessage,ElSelectV2,ElButton} from "element-plus"
import { Cell } from "@ui/pack-antv-x6";
import {pickData} from "../../util"
import Nifi from "../../nifi";
import {t} from "../../i18n/index"
//

//
const { nifi, cell, disabled = false } = defineProps<{nifi:Nifi,disabled?:boolean,cell?:Cell}>();

const id = cell ? cell.id : nifi.group.id;
const cd = cell ? nifi.cells.get(cell) : nifi.group;
const revision = cd.revision;

const isDisabled = computed(() => nifi.graph.mode.value == 'prod' || disabled);
// 参数上下文选项初始化
const parameterContextOptions = reactive<any[]>([])
nifi.flow.refreshParameterContexts().then(() => {
    const ops:any[] = nifi.flow.parameterContexts.map((d:any) => ({label:d.component.name,value:d.component.id}));
    parameterContextOptions.push(...ops)
})
//
const flowfileConcurrencyOptions = [
    {label:"每个节点一个流文件",value:"SINGLE_FLOWFILE_PER_NODE"},
    {label:"每个节点一个批次",value:"SINGLE_BATCH_PER_NODE"},
    {label:"无限制",value:"UNBOUNDED"},
]

const flowfileOutboundPolicyOptions = [
    {label:"当可用时流式传输",value:"STREAM_WHEN_AVAILABLE"},
    {label:"批量输出",value:"BATCH_OUTPUT"},
]

const KEYS:any = [
    ['name','component.name'],
    ['comments','component.comments'],
    ['defaultBackPressureDataSizeThreshold','component.defaultBackPressureDataSizeThreshold'],
    ['defaultBackPressureObjectThreshold','component.defaultBackPressureObjectThreshold'],
    ['defaultFlowFileExpiration','component.defaultFlowFileExpiration'],
    ['flowfileConcurrency','component.flowfileConcurrency'],
    ['flowfileOutboundPolicy','component.flowfileOutboundPolicy'],
    ['parameterContext.id','component.parameterContext.id'],
]
const model = reactive(Object.assign({parameterContext:{id:""}},pickData(cd,KEYS)));
//
// 关闭 抽屉
const closeDrawer = () => {
    nifi.drawer.close();
}
const submitLoading = ref(false)
//
const handleCanel = () => {closeDrawer();}
//
const elFormRef = ref<InstanceType<typeof ElForm>>();
const handleSubmit = async () => {
    // 校验表单
    try {
        await elFormRef.value?.validate();
    } catch (error) {
        ElMessage.warning('表单验证失败，请检查表单值是否符合要求');
        return ;
    }
    submitLoading.value = true;
    const url = `/nifi-api/process-groups/${id}`;
    const data = {disconnectedNodeAcknowledged: false,revision,component:{...model,id}}
    //
    try {
        const res = await nifi.api.put(url,data)
        // 更新
        cell ? nifi.cells.processGroups.update(res) : nifi.group.update(res);
        //
        closeDrawer();
    } catch (error) {
        ElMessage.error('更新处理组信息失败 :: ' + error);
        console.error(error)
    }
    submitLoading.value = false;
}
//


</script>


<template>
    <div class="w-full h-full flex flex-col">
        <!-- header -->
        <div class="w-full overflow-hidden box-border flex justify-between items-center gap-8px m-b-16px h-40px">
            <div class="flex-1 truncate fw-bold">
                <i></i>
                编辑处理组 [ {{ model.name }} ]
            </div>
            <div class="w-140px flex justify-end">
                <template v-if="isDisabled">
                    <el-button plain type="primary" @click="handleCanel">确定</el-button>
                </template>
                <template v-else>
                    <el-button plain @click="handleCanel">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button>
                </template>
            </div>
        </div>
        <!-- Form -->
        <ElForm ref="elFormRef"
            :model="model"
            label-width="200"
            label-position="left"
            :disabled="isDisabled"
            class="w-full box-border flex flex-1 flex-col gap-8px overflow-y-auto overflow-x-hidden p-8px box-border scrollbar-thin text-14px">
            <ElFormItem required label="处理组标签名称" ><ElInput v-model="model.name"></ElInput></ElFormItem>
            <ElFormItem label="参数上下文" prop="parameterContext.id"><ElSelectV2 v-model="model.parameterContext.id" :options="parameterContextOptions"></ElSelectV2></ElFormItem>
            <ElFormItem label="流文件并发模式选择" prop="flowfileConcurrency" ><ElSelectV2 v-model="model.flowfileConcurrency"  :options="flowfileConcurrencyOptions"></ElSelectV2></ElFormItem>
            <ElFormItem label="出站策略选择" prop="flowfileOutboundPolicy"><ElSelectV2 v-model="model.flowfileOutboundPolicy" :options="flowfileOutboundPolicyOptions"></ElSelectV2></ElFormItem>
            <ElFormItem label="默认流文件过期时间"><ElInput v-model="model.defaultFlowFileExpiration"></ElInput></ElFormItem>
            <ElFormItem label="默认背压对象阈值"><ElInput v-model="model.defaultBackPressureObjectThreshold"></ElInput></ElFormItem>
            <ElFormItem label="默认背压数据大小阈值"><ElInput v-model="model.defaultBackPressureDataSizeThreshold"></ElInput></ElFormItem>
            <ElFormItem label="描述"><ElInput v-model="model.comments" type="textarea" ></ElInput></ElFormItem>
        </ElForm>
    </div>
</template>
